{extend name="common/main"}
{block name="css"}
<link type="text/css" rel="stylesheet" href="/static/baidumap/css/bdmapStyle.css">
<style type="text/css">
    #float_butt{
        position: absolute;
        top: 200px;
        right: 20px;
        width: 100px;
        color: #969a9b;
        font-size: 20px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: rgba(0, 0, 0, 0.7);
        border-radius: 4px;
    }
    .la{
        font-size: 12px;
    }
    [data-am-widget=tabs] {
        margin: 0px;
    }
    .theme-white .widget {
        padding: 10px 10px 13px;
    }
    .log{
        font-size: 10px;
        margin-left: 40px;
        z-index:100
    }
    .gh{
        font-size: 10px;
        margin-left: 79px;
        z-index:101
    }
    .am-accordion-item-div{
        position: relative;

    }
    .am-accordion-item-div span{
        position: absolute;
        left: 98px;
        top: 14px;
    }
    .ws{
        width: 257px;
    }
    .button{
        font-size: 13px;
        width: 59px;
        height: 20px;
        padding:0;
    }
    #controller{width:100%; border-bottom:0px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:#dedede30;}
</style>
{/block}

{block name="body"}
<body data-type="widgets">
{include file="common/index"}
<div class="col-sm-2">
    <div class="row">
        <div class="am-u-sm-2 am-u-md-2 am-u-lg-2 ws">
            <div data-am-widget="tabs" class="am-tabs am-tabs-default la">
                <ul class="am-tabs-nav am-cf">
                    <li class="am-active"><a href="[data-tab-panel-0]">全部({$zoshu})</a></li>
                    <li class="" id="a2"><a href="[data-tab-panel-1]">在线({$zshu})</a></li>
                    <li class=""><a href="[data-tab-panel-2]">离线({$bshu})</a></li>
                </ul>
            </div>
            <div class="widget am-cf">
                <div class="mod_box">
                    <div id="slectCustMsge" class="bd profile">
                        <!--&lt;!&ndash;搜索&ndash;&gt;-->
                                <!--<form role="search" class="app-search">-->
                                    <!--<input type="text" placeholder="设备名/IMEI号" class="form-control" style="width: 75%">-->
                                    <!--<button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>-->
                                <!--</form>-->
                        <!--添加分组-->
                        {if $type eq 1}
                        <button type="button" class="am-btn am-btn-success" id="doc-prompt-toggle" style="font-size: 12px;margin-top: 5px;margin-left: 0" >添加分组</button>
                        {/if}
                        <!--分组内容-->
                        <section data-am-widget="accordion" class="am-accordion am-accordion-basic" data-am-accordion='{  }'>
                            {if $type eq 1}
                            {foreach name="res" key="key" item="v"}
                            <div class="am-accordion-item-div">
                            <dl class="am-accordion-item">
                                <dt class="am-accordion-title">{$v.gr_name}</dt>

                                <dd class="am-accordion-bd am-collapse ">
                                    <div class="am-accordion-content">
                                        {foreach name="info" key="key" item="val"}
                                       {if $val.gr_id eq $v.id}
                                        <div class="am-dropdown" data-am-dropdown>
                                            <button class="am-btn am-dropdown-toggle button" data-am-dropdown-toggle onclick="">{$val.nickname}</button>
                                            <ul class="am-dropdown-content">
                                                <li><a href="{:url('Map/route')}?imei={$val.imei}">历史轨迹</a></li>
                                                <!--<li><a href="">下载轨迹</a></li>-->
                                                <!--<li><a href="{:url('Map/index2')}?imei={$val.imei}">电子栅栏</a></li>-->
                                                <!--<li><a href="#">移动分组</a></li>-->
                                            </ul>
                                        </div>
                                        <br/>
                                        {/if}
                                        {/foreach}
                                    </div>
                                </dd>

                            </dl>
                            <span class="log" ><a onclick="edit_button(this,{$v.id})">编辑</a></span>
                            <!--<span class="log gh" >删除</span>-->
                            </div>
                            {/foreach}
                            {else}
                            {foreach name="info" key="key" item="val"}
                            <div class="am-dropdown" data-am-dropdown>
                                <button class="am-btn am-dropdown-toggle button" data-am-dropdown-toggle onclick="">{$val.nickname}</button>
                                <ul class="am-dropdown-content">
                                    <li><a href="{:url('Map/route')}?imei={$val.imei}">历史轨迹</a></li>
                                    <!--<li><a href="">下载轨迹</a></li>-->
                                    <!--<li><a href="{:url('Map/index2')}?imei={$val.imei}">电子栅栏</a></li>-->
                                    <!--<li><a href="#">移动分组</a></li>-->
                                </ul>
                            </div>
                            <br/>
                            {/foreach}
                            {/if}
                        </section>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-sm-10">
    <div id="controller" align="center"></div>
    <section id="allmap" class="tpl-content-wrapper"></section><!--百度地图展示区域-->
</div>
<!--弹框信息-->
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt2">
    <div class="am-modal-dialog">
        <!--<div class="am-modal-hd">Amaze UI</div>-->
        <div class="am-modal-bd">
            修改组名
            <input type="text" class="am-modal-prompt-input">
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>提交</span>
        </div>
    </div>
</div>
<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
    <div class="am-modal-dialog">
        <div class="am-modal-bd">
            分组名称
            <input type="text" class="am-modal-prompt-input">
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" data-am-modal-confirm>确定</span>
        </div>
    </div>
</div>
</body>
{/block}

{block name="js"}
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script><!--百度地图api-->
<script type="text/javascript" src="/static/baidumap/js/jquery.bdmap.js"></script><!--百度地图API模块化成函数供前台调用-->

<script type="text/javascript">

    /*+-------------全局变量-------------------+*/
    $res =[];
    var $imgDir = '/static/baidumap/img/'; //默认图片目录
    var $yjzc_zb = "118.095947,24.622980"; //默认坐标
//    $('#controller').text('福建省厦门市集美区杏林湾路');
    /*+------------地图初始化--------------------+*/
    var map = new BMap.Map("allmap"); //allmap为加载地图区域的ID
    BDMapInit(map,{"isNumc":1,"point":$yjzc_zb,"zoom":"15"});


    /*+--------------------------------+*/
    /**
     * 函数：加载坐标json数据
     * @param json <=> json数据
     */
    function loadPointData(dataJson,paramJson){

        map.clearOverlays();  //一次移除所有的覆盖物(相当于清空所有标注点)(必须!)

        for(var i=0;i<dataJson.data.length;i++){
            var $json = dataJson.data[i];
            var title = $json.title, //文本
                description = $json.detail; //描述
            zuobiao = $json.yjzc_zb.split(','),
                l_point = zuobiao[0], //经度
                r_point = zuobiao[1]; //纬度

            var	img = '', //标注点图标
                style = ''; //标注点样式,使用英文颜色（eg.red）或颜色值（eg.'#1296db')
            if($json.color=='1'){
                img = 'user.png';
                style = "blue";
            }
            if($json.color=='2'){
                img = 'user.png';
                style = "blue";
            }
            if($json.color=='3'){
                img = 'car.png';
                style = "blue";
            }

            if(img!='') img = $imgDir+img;

            //创建标注点
            var $pointJson = {"l_point":l_point,"r_point":r_point,"title":title,"description":description,"style":style,"icon":img}
            createMapPoint($pointJson,paramJson);

        }

    }


//编辑按钮
    function edit_button(t,id){
        $item=$(t).parent().siblings('.am-accordion-item').find('.am-accordion-title');
        $prom2= $('#my-prompt2').find('.am-modal-dialog').find('.am-modal-bd').find('input');
        $prom2.val($item.text());
        $('#my-prompt2').modal({
                relatedTarget: this,
                onConfirm: function(e) {
                    $.post("{:url('edit_zu')}", {id:id,gr_name:e.data}, function(ret){
                        if(ret.code != 200){
                            alert(ret.msg);
                            return false;
                        }
                        $item.text(e.data);
                        return false;
                    });
                },
                onCancel: function(e) {

                }
        });
    };
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    //*                                     分隔线                                                              *//
    ///////////////////////////////////////////////////////////////////////////////////////////////////////////////
    $(function(){
        jinwu();
        setInterval(function working(){
            jinwu();
        },60000);


        /*+--------------------------------+*/
        //=====绑定回车事件
        $('#s_i_map').on('keydown',function(e){
            if(e.keyCode==13){
                $('#btn_search_map').click();
            }

        });
        //=====按关键词检索
        $('#btn_search_map').on('click',function(){
            var keywords = $('#s_i_map').val();
            var local = new BMap.LocalSearch(map, {
                renderOptions:{map: map}
            });
            local.search(keywords);
        });



        /*+--------------------------------+*/
        //=====设为默认位置事件
        $('#btn_defaultPoint').on("click",function(){
            var point = $('#s_i_zuobiao').val(); //默认位置坐标
            alert('默认位置坐标为：'+point);
        })


        /*+--------------------------------+*/
        //=====选中详细信息事件
        $('#c_details').on('change',function(){
            var $this = $(this);
            var showDetails = false;
            if($this.prop("checked")) showDetails = true; //选中时
            else showDetails = false; //取消选中时

            loadPointData($coordinateJson,{"showDetails":showDetails}); //刷新地图数据
        });


        /*+--------------------------------+*/
        //=====选中汇总信息事件
        $('#c_summary').on('change',function(){
            var $this = $(this);
            if($this.prop("checked")){
                alert('已选中')
            }else{
                alert('取消选中')
            }
        });


    }); //END $(function(){});
 //加载地图经纬度
 function jinwu() {
     $.ajax({
         url: "{:url('Map/jwddata')}",
         type: 'POST',
         data: {},
         dataType: 'json',
         success: function (res) {
             $.each(res.data, function ($k, $v) {
                $time = $v.RcvTime;
                if($v.online ==1){
                    $das='在线';
                }else {
                    $das='离线';
                }
                 $res[$k] = {
                     yjzc_zb: $v.bdlongitude + ',' + $v.bdlatitude,
                     title:$v.nickname,
//                     detail: $v.address,
                     color: '2',
                     detail:'<em class="bdtitle">'+$v.nickname+'</em><br>设备号：<em class="bdaddress">'+$v.imei+'</em><br>状态：<em class="bdaddress">'+$das+'</em><br>电量：<em class="bdaddress">'+$v.battery+'%</em><br>定位时间：<em class="bdaddress">'+$v.updateTime+'</em><br>定位方式：<em class="bdaddress">'+$v.type+'<br>地址：<em class="bdaddress">'+$v.address+'</em>'
                 };
//                 $('#controller').text('福建省厦门市集美区杏林湾路');
                 var $coordinateJson = {data: $res};
                 loadPointData($coordinateJson, {"showDetails": false}); //根据json加载地图数据
             });
         }
     });
 }


    //添加分组
    $(function() {
        $('#doc-prompt-toggle').on('click', function() {
            $('#my-prompt').modal({
                relatedTarget: this,
                //确定
                onConfirm: function(e) {
                    var param = new Object();
                      param['gr_name']=e.data;
                    $.post("{:url('Map/addgrouping')}", param, function(ret){
                        if(ret.code != 200){
                            layer.msg(ret.msg, {icon: 2});
                            return false;
                        }

                        layer.msg(ret.msg, {icon: 1,time: 1500}, function(){
                            location.href = "{:url('Map/map')}";
                            return false;
                        });
                    });

//                    alert('你输入的是：' + e.data || '')
                },
                //取消
                onCancel: function(e) {

                }
            });
        });
    });
</script>
{/block}